<template>
	<!-- 资产看板 -->
	<div class="property-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader
				:menuItemsArr="postMenuArr"
				:titleImg="postTitleImg"
				@clickPath="clickMenu"
			></ScreenHeader>
			<div class="property-main">
				<!-- 左边 -->
				<div class="dataScreen-lf">
					<!-- 经营情况 -->
					<div class="lf-top">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['经营情况']">
						</ItemTitel>
						<div class="lf-top-cn">
							<div v-for="item in leftArr" class="left-item">
								<div class="left-icon">
									<img :src="item.img" alt="" />
								</div>
								<div class="right-desc">
									<div class="img">
										<!-- <img :src="item.title" alt="" /> -->
										<span class="textColor">{{ item.title }}</span>
										<div v-show="item.rate">
											<img :src="getSign(item.sign)" alt="" />
											<span
												:style="{
													color: item.sign === 'up' ? '#10FF0E' : '#F50000',
												}"
											>
												{{ item.rate }}%
											</span>
										</div>
									</div>
									<div class="text">
										<span class="numColor">{{ item.value }}</span>
										<span class="textColor m-l10">{{
											getUnit(item.type)
										}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 资产统计 -->
					<div class="lf-center">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['资产统计']">
						</ItemTitel>
						<div class="lf-center-cn">
							<div class="center-left">
								<img
									src="@/assets/screenImg/propertyImg/left/pic4.png"
									alt=""
								/>
								<div>
									<span class="textColor">建筑总面积</span>
									<div>
										<span class="numColor">
											{{ changeNumToWan(areaArr[0]) }}
										</span>
										<span class="textColor m-l10">万㎡</span>
									</div>
								</div>
							</div>
							<div class="center-right">
								<div>
									<img
										src="@/assets/screenImg/propertyImg/left/pic5.png"
										alt=""
									/>
									<div>
										<span class="textColor">闲置总面积</span>
										<div>
											<span class="numColor">
												{{ changeNumToWan(areaArr[1]) }}
											</span>
											<span class="textColor m-l10">万㎡</span>
										</div>
									</div>
								</div>
								<div>
									<img
										src="@/assets/screenImg/propertyImg/left/pic5.png"
										alt=""
									/>
									<div>
										<span class="textColor">租赁总面积</span>
										<div>
											<span class="numColor">
												{{ changeNumToWan(areaArr[2]) }}
											</span>
											<span class="textColor m-l10">万㎡</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 资产列表 -->
					<div class="lf-bottom">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['资产列表']">
						</ItemTitel>
						<div class="lf-bottom-cn">
							<scroll-board
								:config="configLeft"
								:style="{ width: '100%', height: leftHeight + 'px' }"
								@click="showInfo"
							/>
							<!-- <el-table
								:data="tableData"
								style="width: 100%"
								class="table-box"
								header-row-class-name="table-head"
								row-class-name="table-row"
								:max-height="leftHeight"
								ref="leftTableRef"
							>
								<el-table-column prop="id" label="序号">
									<template #default="{ row, $index }">
										<div>
											{{ $index + 1 < 10 ? "0" + ($index + 1) : $index + 1 }}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="assets_name" label="资产名字" />
								<el-table-column prop="build_area" label="面积">
									<template #default="scope">
										<div>{{ scope.row.build_area }}㎡</div>
									</template>
								</el-table-column>
								<el-table-column prop="price" label="资产价值">
									<template #default="scope">
										<div>￥{{ scope.row.assets_worth ?? 0 }}</div>
									</template>
								</el-table-column>
								<el-table-column prop="type" label="类型">
									<template #default="scope">
										<div class="self">{{ typeMapEnum[scope.row.type] }}</div>
									</template>
								</el-table-column>
							</el-table> -->
						</div>
					</div>
				</div>
				<!-- 中间 -->
				<div class="dataScreen-ct">
					<div class="ct-top">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['租金定价分析']">
						</ItemTitel>
						<div class="ct-top-cn">
							<scroll-board
								:config="configCenter"
								:style="{ width: '100%', height: listHeight + 'px' }"
								class="list"
							/>
							<!-- <el-table
								:data="tableCenter"
								style="width: 100%"
								class="table-box"
								header-row-class-name="table-head"
								row-class-name="table-row list"
								:max-height="listHeight"
							>
								<el-table-column prop="id" label="序号">
									<template #default="scope">
										<div>
											{{
												scope.row.id < 10 ? "0" + scope.row.id : scope.row.id
											}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="listA" label="列表" />
								<el-table-column prop="listB" label="列表" />
								<el-table-column prop="listC" label="列表" />
								<el-table-column prop="listD" label="列表" />
								<el-table-column prop="listE" label="列表" />
							</el-table> -->
							<div class="top-cn-bottom">
								<div>
									<span class="square darkblue"></span>
									<span class="active">商铺</span>
								</div>
								<div>
									<span class="square blue"></span>
									<span>农贸市场</span>
								</div>
								<div>
									<span class="square red"></span>
									<span>综合体</span>
								</div>
								<div>
									<span class="square green"></span>
									<span>全部</span>
								</div>
								<div>
									<span class="square pink"></span>
									<span>
										其他（按点位展示学校/医院、实验室、轻松驿站、双塔、网球中心、文体中心）
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="ct-bottom">
						<div class="ct-bottom-cn">
							<div class="desc1" v-if="Object.keys(rentSituation).length">
								<span>新增出租面积：{{ rentSituation.new_lease_area }}㎡</span>
								<span>退组面积：{{ rentSituation.leave_area }}㎡</span>
								<span>整体出租率：{{ rentSituation.letting_rate }}%</span>
								<span>盘活率：{{ rentSituation.lease_rate }}%</span>
							</div>
							<div class="map-box">
								<mapBox :map-data="mapData"></mapBox>
							</div>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="dataScreen-rg">
					<div class="dataScreen-top">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['资产经营情况']">
							<template #rightCnBox>
								<span @click="diffDetail">查看差额详情</span>
							</template>
						</ItemTitel>
						<!-- chart区域 -->
						<div class="line-chartBox">
							<incomeChart ref="incomeChartRef" />
						</div>
					</div>
					<div class="dataScreen-bottom">
						<ItemTitel2
							:itemTitleImg="
								postItemTitleImgObj[
									rightActive === '应收未收预警'
										? '应收未收预警_active'
										: '应收未收预警'
								]
							"
							@clickItem="btnItem"
						>
							<template #rightCnBox>
								<div class="rl-title">
									<img
										:src="
											postItemTitleImgObj[
												rightActive === '资产闲置预警'
													? '资产闲置预警_active'
													: '资产闲置预警'
											]
										"
										alt="资产闲置预警"
										@click="clickWarn"
									/>
									<img
										:src="
											postItemTitleImgObj[
												rightActive === '租金水平排名'
													? '租金水平排名_active'
													: '租金水平排名'
											]
										"
										alt="租金水平排名"
										@click="clickSort"
									/>
								</div>
							</template>
						</ItemTitel2>
						<!-- chart区域 -->
						<div class="column-chartBox">
							<sortChart ref="sortChartRef" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			v-model="dialogVisible"
			title="房源信息详情"
			width="35%"
			align-center
			:modal="true"
			class="info-dialog"
			@close="closeDialog"
		>
			<div class="dialog-content">
				<p>资产名称：{{ dialogMsg.assets_name }}</p>
				<p>面积：{{ dialogMsg.build_area || 0 }}㎡</p>
				<p>资产价值：{{ dialogMsg.assets_worth || 0 }}元</p>
				<p>地址：{{ dialogMsg.address }}</p>
				<p>类型：{{ typeMapEnum[dialogMsg.get_type] }}</p>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false" size="small">
						确 认
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	onBeforeUnmount,
	nextTick,
	computed,
} from "vue";
import ScreenHeader from "../components/ScreenHeader";
import { getScale, calcHeight, changeNumToWan } from "../utils/handelScreen";
import ItemTitel from "../components/ItemTitel";
import ItemTitel2 from "./components/ItemTitel";
import incomeChart from "./components/incomeChart.vue";
import sortChart from "./components/sortChart.vue";
import { ElTable, ElPopover, ElDialog } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import httpApi from "@/api-dashboard/propertyApi.js";
import mapBox from "./components/map.vue";

// 菜单项
const postMenuArr = ref([
	{ name: "全部资产", path: 0 },
	{ name: "自有资产", path: 1 },
	{ name: "受托资产", path: 2 },
]);
// 页面大标题图片
const postTitleImg = require("@/assets/screenImg/propertyImg/title.png");
// 各小标题图片
const postItemTitleImgObj = reactive({
	经营情况: require("@/assets/screenImg/propertyImg/title1.png"),
	资产统计: require("@/assets/screenImg/propertyImg/title2.png"),
	资产列表: require("@/assets/screenImg/propertyImg/title3.png"),
	租金定价分析: require("@/assets/screenImg/propertyImg/title4.png"),
	资产经营情况: require("@/assets/screenImg/propertyImg/title5.png"),
	应收未收预警_active: require("@/assets/screenImg/propertyImg/title6.png"),
	资产闲置预警_active: require("@/assets/screenImg/propertyImg/title6_2_2.png"),
	租金水平排名_active: require("@/assets/screenImg/propertyImg/title6_3_2.png"),
	应收未收预警: require("@/assets/screenImg/propertyImg/title6_1.png"),
	资产闲置预警: require("@/assets/screenImg/propertyImg/title6_2.png"),
	租金水平排名: require("@/assets/screenImg/propertyImg/title6_3.png"),
});

//  头部菜单参数（0全部、1自有、2委托）
let sourceType = ref("0");
let typeStr = computed(() => {
	return sourceType.value === "0" ? "" : sourceType.value;
});

// 左边
// ----经营情况数据----
let leftArr = ref([
	{
		img: require("@/assets/screenImg/propertyImg/left/pic1.png"),
		title: "租金收入预算",
		sign: "up",
		rate: 0,
		value: 0,
		type: 2, //控制单位
	},
	{
		img: require("@/assets/screenImg/propertyImg/left/pic3.png"),
		title: "完成收入",
		sign: "up",
		rate: 0,
		value: 0,
		type: 2,
	},
	{
		img: require("@/assets/screenImg/propertyImg/left/pic2.png"),
		title: "收入目标完成率",
		sign: "up",
		rate: 0,
		value: 0,
		type: 1,
	},
	{
		img: require("@/assets/screenImg/propertyImg/left/pic3.png"),
		title: "资产总值",
		sign: "down",
		rate: 0,
		value: 0,
		type: 2,
	},
]);
// 升降符号判断
let getSign = function (i) {
	let img = ref({
		upImg: require("@/assets/screenImg/commonImg/up.png"),
		downImg: require("@/assets/screenImg/commonImg/down.png"),
	});
	if (i === "up") {
		return img.value.upImg;
	} else if (i === "down") {
		return img.value.downImg;
	}
};
// 数值单位
let getUnit = function (i) {
	let str = ref("");
	switch (i) {
		case 1:
			str = "%";
			break;
		case 2:
			str = "万元";
			break;
		default:
		case 3:
			str = "元";
			break;
	}
	return str;
};
//  ----经营情况数据----
let getOperateData = (params) => {
	httpApi.operateState(params).then((res) => {
		let { httpStatusCode, data } = res;
		if (httpStatusCode === 200) {
			let record = data.records[0];
			for (let i in leftArr.value) {
				let obj = leftArr.value[i];
				if (record) {
					if (i == 0) {
						obj.value = changeNumToWan(record.revenue_estimates);
						obj.rate = Math.round(record.revenue_estimates_yy * 100);
					} else if (i == 1) {
						obj.value = changeNumToWan(record.revenue);
						obj.rate = Math.round(record.revenue_yy * 100);
					} else if (i == 2) {
						obj.value = Math.round(record.revenue_percent * 100);
						obj.rate = Math.round(record.revenue_percent_yy * 100);
					} else if (i == 3) {
						obj.value = changeNumToWan(record.total_value);
						obj.rate = Math.round(record.total_value_yy * 100);
					}
				} else {
					obj.value = 0;
					obj.rate = 0;
				}
				obj.sign = obj.rate > 0 ? "up" : "down";
			}
		}
	});
};
getOperateData({
	sourceType: sourceType.value === "0" ? "3" : sourceType.value,
});
//  ----资产统计数据----
let areaArr = ref([0, 0, 0]);
let getInfo = (params) => {
	httpApi.assetInfo(params).then((res) => {
		let { httpStatusCode, data } = res;
		if (httpStatusCode === 200) {
			let record = data.records[0];
			if (record) {
				areaArr.value = [
					record.total_area,
					record.idle_area,
					record.lease_area,
				];
			} else {
				areaArr.value = [0, 0, 0];
			}
		}
	});
};
getInfo({ sourceType: sourceType.value === "0" ? "3" : sourceType.value });

// region 资产列表
let leftHeight = ref();
let leftTableRef = ref(null);
let tableData = ref([]);
let configLeft = ref({
	header: [
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>序号</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>资产名字</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>面积</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>资产价值</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>类型</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(5).fill("center"),
	// rowNum:3
});
let dialogVisible = ref(false);
let dialogData = ref([]);
let dialogMsg = ref({});
let leftScrollBoard = ref();
let showInfo = (content) => {
	if (content.columnIndex === 1) {
		let span = document.createElement("span");
		span.innerHTML = content.row[0];
		let el = span.getElementsByTagName("span");
		let id = el[0].innerText;
		dialogMsg.value = dialogData.value[id - 1];
		// console.log(dialogMsg.value);
		dialogVisible.value = true;
	}
};
let closeDialog = () => {
	dialogMsg.value = {};
};
const typeMapEnum = {
	1: "农贸市场",
	2: "商业(绿道)",
	3: "商业(商铺)",
	4: "写字楼",
	5: "综合体",
	6: "其他",
};
const getMethod = {
	1: "政府划转",
	2: "无偿委托",
	3: "租借",
	4: "自建",
	5: "有偿转让",
};
let getList = (params) => {
	httpApi.assetList(params).then((res) => {
		let { httpStatusCode, data } = res;
		if (httpStatusCode === 200) {
			tableData.value = data.records;
			if (data.records && data.records.length) {
				dialogData.value = data.records;
				configLeft.value.data = data.records.map((item, index) => {
					let i = index + 1 < 10 ? "0" + (index + 1) : index + 1;
					return [
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${i}</span>`,
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);cursor:pointer;">${item.assets_name}</span>`,
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${
							item.build_area ?? 0
						}㎡</span>`,
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">￥${
							item.assets_worth ?? 0
						}</span>`,
						`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;">
              ${typeMapEnum[item.type]}</span>`,
					];
				});
			}
		}
	});
};
getList({ sourceType: typeStr.value });

// endregion

// region 资产列表_出租情况
const rentSituation = ref({});
let getLease = (params) => {
	httpApi.assetLease(params).then((res) => {
		let { httpStatusCode, data } = res;
		if (httpStatusCode === 200) {
			if (data.records && data.records.length) {
				const result = data.records[0];
				rentSituation.value.new_lease_area = result.new_lease_area;
				rentSituation.value.leave_area = result.leave_area;
				rentSituation.value.letting_rate = result.letting_rate;
				rentSituation.value.lease_rate = result.lease_rate;
			}
		}
	});
};
getLease({ sourceType: sourceType.value, type: "0" });
// endregion

// region 资产列表_商铺----地图渲染
// 地图数据
let mapData = ref([]);
const markerIcon = {
	1: require("@/assets/screenImg/propertyImg/center/icon4.png"), //yellow  商业(绿道)
	2: require("@/assets/screenImg/propertyImg/center/icon2.png"), //green  全部
	3: require("@/assets/screenImg/propertyImg/center/icon3.png"), //blue  农贸市场
	4: require("@/assets/screenImg/propertyImg/center/icon2.png"), //green  全部
	5: require("@/assets/screenImg/propertyImg/center/icon5.png"), //red  综合体
	6: require("@/assets/screenImg/propertyImg/center/icon1.png"), //pink 其他（按点位展示学校/医院、实验室、轻松驿站、双塔、网球中心、文体中心）
};
const nameType = {
	1: "农贸市场",
	2: "商业(绿道)",
	3: "商业(商铺)",
	4: "写字楼",
	5: "综合体",
	6: "其他",
};
let getShop = (params) => {
	httpApi.assetList({}).then((res) => {
		let { httpStatusCode, data } = res;
		if (httpStatusCode === 200) {
			mapData.value = data.records.map((item) => {
				return {
					src: markerIcon[item.type], //blue 农贸市场
					lng: item.longitude,
					lat: item.latitude,
					name: nameType[item.type],
					total: item.num,
					hireRate: item.letting_rate,
					captureRate: item.accrued_rate,
					area: item.lease_area,
					limitArea: item.idle_area,
				};
			});
		}
	});
};
getShop({ assetId: "1" });

// endregion
// 中间
// ----租金定价分析----
let listHeight = ref();
let tableCenter = ref([
	{
		name: "152号商铺",
		type: 3,
		method: 1,
		belong: "桂溪街道办事处",
		property: 2349773054242860000,
		region: 100,
		stree: "100103",
		address: "大源152号院",
		area: 7195.51,
		money: 94,
	},
	{
		name: "檬梓街商铺",
		type: 3,
		method: 5,
		belong: "合作街道办事处",
		property: 2349773054242860000,
		region: 200,
		stree: "200101",
		address: "檬梓街72、74、76、78、8(西源大道1101号顺江6号楼)",
		area: 142,
		money: 99,
	},
	{
		name: "大源四期农贸市场",
		type: 1,
		method: 5,
		belong: "芳草街道办事处",
		property: 2349773054242860000,
		region: 100,
		stree: "100103",
		address: "盛安街双祥川音幼儿园对面",
		area: 6000,
		money: 10.2,
	},
	{
		name: "丰收综合体",
		type: 5,
		method: 2,
		belong: "桂溪街道办事处",
		property: 7851871479639850000,
		region: 100,
		stree: "100102",
		address: "高新区泰和二街366号、222号",
		area: 32957.8,
		money: 69,
	},
]);
let configCenter = ref({
	header: [
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>资产名称</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>资产类型</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>取得方式</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>资产权属</span>`,
		// `<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>我企资产在管部门</span>`,
		// `<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>区域</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>所在街道</span>`,
		// `<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>地址</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>面积(㎡)</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>租金(元/㎡/月)</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(7).fill("center"),
	rowNum: 3,
});
configCenter.value.data = tableCenter.value.map((item, index) => {
	let i = index + 1 < 10 ? "0" + (index + 1) : index + 1;
	return [
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.name}</span>`,
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${
			typeMapEnum[item.type]
		}</span>`,
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${
			getMethod[item.method]
		}</span>`,
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.belong}</span>`,
		// `<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.property}</span>`,
		// `<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.region}</span>`,
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.stree}</span>`,
		// `<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.address}</span>`,
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.area}</span>`,
		`<span style="font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.money}</span>`,
	];
});

// 右边
//  ----查看差额----
let diffDetail = () => {
	// console.log("查看差额");
};
let rightActive = ref("应收未收预警");
let btnItem = () => {
	rightActive.value = "应收未收预警";
	screenChartObj.chart2 = sortChartRef.value?.initSortChart(
		"应收未收预警",
		typeStr.value
	);
};
let clickWarn = () => {
	rightActive.value = "资产闲置预警";
	screenChartObj.chart2 = sortChartRef.value?.initSortChart(
		"资产闲置预警",
		typeStr.value
	);
};
let clickSort = () => {
	rightActive.value = "租金水平排名";
	screenChartObj.chart2 = sortChartRef.value?.initSortChart(
		"租金水平排名",
		typeStr.value
	);
};

// 获取子组件的ref
const incomeChartRef = ref();
const sortChartRef = ref();

// 所有图表对象
const screenChartObj = reactive({
	chart1: null,
	chart2: null,
});

const initAllCharts = () => {
	screenChartObj.chart1 = incomeChartRef.value?.initIncomeChart(
		sourceType.value
	);
	screenChartObj.chart2 = sortChartRef.value?.initSortChart(
		rightActive.value,
		typeStr.value
	);
};

// ----点击头部标题菜单----
let clickMenu = (i) => {
	sourceType.value = i + "";
	// console.log(sourceType.value);
	getOperateData({
		sourceType: sourceType.value === "0" ? "3" : sourceType.value,
	});
	getInfo({ sourceType: sourceType.value === "0" ? "3" : sourceType.value });
	getList({ sourceType: typeStr.value });

	screenChartObj.chart1 = incomeChartRef.value?.initIncomeChart(
		sourceType.value
	);
	screenChartObj.chart2 = sortChartRef.value?.initSortChart(
		rightActive.value,
		typeStr.value
	);
};

// 监听浏览器 resize 事件时执行的方法
const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};
onMounted(() => {
	// 初始化自适应 -- 刚显示的时候就给外层盒子加上缩放属性
	if (dataScreenRef.value) {
		// 缩放并居中。注意：需要搭配 position: absolute; left: 50%; top: 50%; 一起使用
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		// 设计稿宽高
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;

		// 为浏览器绑定自适应函数 -- 防止浏览器栏变化后不再适配
		window.addEventListener("resize", screenResize);

		nextTick(() => {
			leftHeight.value = calcHeight("lf-bottom-cn");
			listHeight.value = calcHeight("ct-top-cn");
			// 初始化 echarts
			initAllCharts();
		});
	}
});
// 销毁时触发
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
	// 彻底释放 eCharts 实例占用的所有资源，包括DOM、事件等
	Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>
<style lang="scss" scoped>
@import "./propertyStyle.scss";

.rl-title {
	width: 100%;
	display: flex;
	margin-left: 20px;
	justify-content: space-around;
	align-items: center;

	img {
		margin-left: 30px;
		cursor: pointer;
	}
}
</style>
